<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="header">
			<view class="sele" @tap="show = true">
				<span>{{date}}</span>
				<image src="@/static/img/wright.png" mode=""></image>
			</view>
		</view>
		<view class="con">
			<ul>
				<li class="one">
					<view class="left">
						<view class="msg">
							签单数量
						</view>
						<view class="num">
							{{data.num1}}
						</view>
					</view>
					<view class="right">
						<image src="@/static/img/statistics1.png" mode=""></image>
					</view>
				</li>
				<li class="two">
					<view class="left">
						<view class="msg">
							签单金额
						</view>
						<view class="num">
							{{data.total1}}
						</view>
					</view>
					<view class="right">
						<image src="@/static/img/statistics2.png" mode=""></image>
					</view>
				</li>
				<li class="the">
					<view class="left">
						<view class="msg">
							盈利收入
						</view>
						<view class="num">
							{{data.money1}}
						</view>
					</view>
					<view class="right">
						<image src="@/static/img/statistics3.png" mode=""></image>
					</view>
				</li>
				<li class="for">
					<view class="left">
						<view class="msg">
							拒收订单
						</view>
						<view class="num">
							{{data.num2}}
						</view>
					</view>
					<view class="right">
						<image src="@/static/img/statistics4.png" mode=""></image>
					</view>
				</li>
				<li class="five">
					<view class="left">
						<view class="msg">
							拒收金额
						</view>
						<view class="num">
							{{data.total2}}
						</view>
					</view>
					<view class="right">
						<image src="@/static/img/statistics5.png" mode=""></image>
					</view>
				</li>
				<li class="six">
					<view class="left">
						<view class="msg">
							物流成本
						</view>
						<view class="num">
							{{data.money2}}
						</view>
					</view>
					<view class="right">
						<image src="@/static/img/statistics6.png" mode=""></image>
					</view>
				</li>
			</ul>
			<u-datetime-picker :show="show" v-model="value1" mode="date" :maxDate="maxDate" @confirm="confirm"
				@cancel="show = false" @close="show = false" :closeOnClickOverlay="true"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import {
		statistics
	} from '@/api/inner.js'
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				maxDate: Number(new Date()),
				data: {},
				date: '',
				watermark: '',
			}
		},
		onLoad() {
			this.watermark = uni.getStorageSync('watermark')
			let now = new Date()
			let y = now.getFullYear()
			let m = now.getMonth() + 1
			let d = now.getDate()
			this.date = `${y}-${m}-${d}`
			this.getData()
		},
		methods: {
			confirm(e) {
				console.log(e)
				let date = new Date(e.value)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate()
				this.date = `${y}-${m}-${d}`
				this.getData()
				this.show = false
			},
			async getData() {
				let res = await statistics({
					date: this.date
				})
				console.log(res)
				this.data = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 44px);
		background-image: url('@/static/img/tjBg.png');
		background-repeat: no-repeat;
		background-position: top -44px;
		background-size: 100% 204px;

		.header {
			display: flex;
			padding: 130px 20px 18px;

			.sele {
				display: flex;
				align-items: center;
				padding: 8px 10px;
				color: #fff;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 1000px;
				border: 1px solid rgba(255, 255, 255, 0.15);

				image {
					width: 14px;
					height: 14px;
					margin-left: 5px;
				}
			}
		}

		.con {
			padding: 18px 15px;
			background-color: #fff;
			border-radius: 20px 20px 0 0;

			ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				li {
					width: 48%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28px 12px;
					margin-bottom: 15px;
					border-radius: 10px;

					.left {
						.msg {
							color: #3D3D3D;
							margin-bottom: 10px;
						}

						.num {
							color: #232323;
						}
					}

					.right {
						image {
							width: 37px;
							height: 37px;
						}
					}
				}

				.one {
					background-color: #C3EDDA;
				}

				.two {
					background: linear-gradient(224deg, #FBECC6 0%, #F7E0B6 100%);
				}

				.the {
					background: linear-gradient(222deg, #D1ECFC 0%, #BCE1F9 100%);
				}

				.for {
					background: linear-gradient(224deg, #F7E0CA 0%, #F5D1BD 100%);
				}

				.five {
					background: linear-gradient(223deg, #FDEBCF 0%, #FAF3E5 100%);
				}

				.six {
					background: linear-gradient(222deg, #D4F6F8 0%, #E1F8F9 100%);
				}
			}
		}
	}
</style>